<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="vue">
        <todo>
            <todo-title slot="todo-title" title="今日动漫推荐"></todo-title>
            <todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item"
                        v-bind:index="index" v-on:remove="removeItem(index)"></todo-items>
        </todo>
    </div>

<script>
        Vue.component('todo', {
            template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
               </div>'
        });
        Vue.component('todo-title', {
            props: ['title'],
            template: '<div>{{title}}</div>'
        });
        Vue.component('todo-items', {
            props: ['item', 'index'],
            template: '<li>{{index + 1}}. {{item}} <button @click="remove();">删除</button></li>',
            methods: {
                remove: function (index) {
                    // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
                    this.$emit('remove', index);
                }
            }
        });
        var vm = new Vue({
            el: '#vue',
            data: {
                todoItems: ['《刀剑神域3》', '《关于我转生成为史莱姆这件事》', '《实力至上主义教室》']
            },
            methods: {
                removeItem:function (index) {
                    //删除
                    this.todoItems.splice(index,1);
                }
            }
        });
    </script>
</body>
</html>